<template>
    <div class="platform-page page">
        <img width="100%" src="/images/coach_training_banner.jpg"/>
        <div class="content">
            <PlatformCrumb back="新闻资讯编辑/新增" style="    margin-top: 0;">
            </PlatformCrumb>
            <el-form :model="addTrain" :rules="rules" ref="addTrain" label-width="0px">
                <div class="content event-detail pl30">
                    <el-form-item prop="title">
                        <div class="matchEdititem">
                            <h2>新闻标题</h2>
                            <el-input type="text" class="w640" v-model="addTrain.title"
                                      placeholder="请填写新闻标题"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item prop="title">
                        <div class="matchEdititem">
                            <h2>是否显示</h2>
                            <div class="flexstart">
                                <el-switch
                                        v-model="addTrain.hide"
                                        active-value="1"
                                        inactive-value="0"
                                >
                                </el-switch>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="showImg">
                        <div class="upload-con display-flex-row">
                            <div class="upload-con-item">
                                <div class="sub-title">新闻配图：</div>
                                <div class="peitu">
                                    <img v-if="addTrain.showImg" :src="addTrain.showImg|filtersImg" alt="">
                                    <el-upload
                                            ref='upload'
                                            :action='imgupload'
                                            class="upload-demo"
                                            accept="image/jpeg,image/gif,image/png"
                                            :show-file-list="false"
                                            name="file"
                                            :on-success="handleAvatarSuccess"
                                            multiple>
                                        <i class="el-icon-plus avatar-uploader-icon"></i>
                                        <div class="el-upload__text">点击上传</div>
                                    </el-upload>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item prop="content">
                        <div class="matchEdititem">
                            <h2>正文</h2>
                            <div id="editorElem" class="ml30" style="text-align:left;margin-left: 50px"></div>
                        </div>
                    </el-form-item>
                    <el-button class="savebtn2" @click="submitForm('addTrain')">保存</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {informationgetOne, courseGet, informationaddOne, informationeditOne} from '../../../api/api/platform.js';
    import {baseImgPath, basefile, imgupload} from '@/config/env.js';
    import E from 'wangeditor'

    export default {
        components: {
            PlatformCrumb,
        },
        data() {
            return {
                editorContent: '',
                id: this.$route.query.id ? this.$route.query.id : 0,
                data: {
                    id: this.$route.query.id ? this.$route.query.id : 0,
                },
                addTrain: {
                    id: this.$route.query.id ? this.$route.query.id : 0,
                    "content": "",
                    "showImg": "",
                    "title": "",
                    "hide": '1'
                },
                imgupload: imgupload,
                rules: {
                    title: [
                        {required: true, message: '请输入机构名称', trigger: 'blur'},
                    ],
                    content: [
                        {required: true, message: '请输入正文', trigger: 'blur'},
                    ],
                    showImg: [
                        {required: true, message: '请上传机构配图', trigger: 'blur'},
                    ]
                },
            };
        },
        created() {
            this.getDetail2()
        },
        mounted() {
            var that = this;
            var editor = new E('#editorElem')
            editor.customConfig.onchange = (html) => {
                this.addTrain.content = html
            }
            editor.create()
            if (this.id != 0) {
                informationgetOne(this.data).then(res => {
                    if (res.code == 200) {
                        that.addTrain.title = res.data.title
                        that.addTrain.showImg = res.data.showImg
                        that.addTrain.content = res.data.content
                        editor.txt.html(this.addTrain.content)
                    }
                });
            }
        },
        methods: {
            submitForm(formName) {
                var that = this;
                that.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (that.id == 0) {
                            that.addTrains()
                        } else {
                            that.editTrains()
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            addTrains() {
                var that = this;
                informationaddOne(this.addTrain).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        that.$message({
                            message: '新增成功',
                            type: 'success'
                        });
                        this.golist()
                    }
                });
            },
            editTrains() {
                var that = this;
                informationeditOne(this.addTrain).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        that.$message({
                            message: '编辑成功',
                            type: 'success'
                        });
                        that.golist()
                    }
                });
            },
            getDetail() {
                var that = this;
                informationgetOne(this.data).then(res => {
                    if (res.code == 200) {
                        that.addTrain.title = res.data.title
                        that.addTrain.showImg = res.data.showImg
                        that.addTrain.content = res.data.content
                    }
                });
            },
            getDetail2() {
                if (this.id == 0) {

                } else {
                    this.getDetail()
                }
            },
            handleAvatarSuccess(res, file) {
                console.log(res);
                console.log(file);
                this.addTrain.showImg = res.data.path
            },
            golist() {
                var that = this;
                that.$router.push({
                    path: '/platform/news/list',
                })
            },
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        },
    };
</script>
<style>
    .el-upload {
        width: 98px;
        height: 98px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .upload-con .avatar-uploader-icon {
        height: 30px !important;
        width: 30px !important;
        line-height: 30px !important;
    }

    .el-upload-dragger {
        width: 98px !important;
        height: 98px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .upload-video .el-upload {
        width: 100px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(0deg, rgba(251, 251, 251, 1), rgba(244, 244, 244, 1), rgba(255, 255, 255, 1));
        border: 1px solid rgba(227, 227, 227, 1);
    }
</style>
<style lang="less" scoped>
    @import url("../platform.less");

    @deep: ~">>>";

    .operation {
        margin-right: 25px;
    }

    .upload {
        background: #fff;
        padding: 30px 130px;
    }

    .upload-item {
        margin-bottom: 30px;

        > .title {
            &::before {
                width: 4px;
                height: 18px;
                background-color: #c60818;
                display: inline-block;
                content: " ";
                margin-right: 10px;
                vertical-align: -3px;
            }

            .name {
                font-size: 16px;
            }

            .desc {
                font-size: 12px;
                color: #999;
                margin-left: 15px;
            }
        }
    }

    .upload-con {
        margin-top: 24px;

        @{deep} {
            .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;

                &:hover {
                    border-color: #409eff;
                }
            }
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 98px;
            height: 98px;
            line-height: 98px;
            text-align: center;
        }

        .avatar {
            width: 98px;
            height: 98px;
            display: block;
        }

        .sub-title {
            margin-bottom: 27px;
        }

        .upload-con-item {
            margin-right: 68px;

            @{deep} {
                .el-button {
                    margin-top: 20px;
                    float: right;
                }
            }
        }

    }
</style>
